<template>
	<view class="content">
		<view class="publisher">
			<!-- <image class="publisher_img" src="../../static/img/head_img.png" mode=""></image> -->
			<view class="publisher_inner">
				<view class="title">{{form.contents}}</view>
				<view class="publisher_tag">
					<view class="p_zhao" v-if="form.type == 0">招聘</view>
					<view class="p_zhao qiuzhi" v-if="form.type == 1">求职</view>
					<view class="p_top" v-if="String(form.stick) === '0'">置顶</view>
					<!-- <view class="p_time">{{form.addTime}}</view> -->
				</view>
			</view>
		</view>
		<!-- <view class="p_content">{{form.contents}}</view> -->
		<view style="margin-top: 20rpx;">
			<view class="q_link" v-if="form.type == 0 && form.company">招工单位：<text style="color: #222222">{{form.company}}</text></view>
			<view class="q_link">联系人：<text style="color: #222222">{{form.customerName}}</text></view>
			<view class="q_link" v-if="form.type == 0">招聘岗位：<text style="color: #222222">{{form.post}}</text></view>
			<view class="q_link" v-if="form.type == 1">求职岗位：<text style="color: #222222">{{form.post}}</text></view>
			<view class="q_link" v-if="form.type == 0">薪水：<text style="color: #222222">{{(form.salary == "undefined" || form.salary == null || form.salary == '') ? '面谈' : form.salary + ' 元/月' }}</text></view>
			<view class="q_link" v-if="form.type == 1">期望薪资：<text style="color: #222222">{{form.salary}}</text></view>
			<!-- <view class="q_link" v-if="form.type == 0 && form.address">地址：<text style="color: #222222">{{form.address}}</text></view> -->
			<!-- <view class="q_link">联系电话：<text style="color: #222222">{{form.mobile}}</text></view>
			<view class="q_link" v-if="form.customerWechat">微信：<text style="color: #222222">{{form.customerWechat}}</text></view> -->
			<!-- <view class="q_link" v-if="form.type == 0 && form.company">招工单位：<text style="color: #222222">{{form.company}}</text></view> -->
			<view class="q_link" v-if="form.type == 0 && form.address">地址：<text style="color: #222222">{{form.address}}</text></view>
		</view>
		<view class="q_tag" v-if="form.highlights">
			<view class="q_tag_inner" v-for="(item,index) in form.highlights.split(',')">{{item}}</view>
		</view>
		<view class="p_img">
			<image v-for="(item,index) in imgList" :key="index" class="p_img_inner" :src="item" @tap.stop="clickImg(index)" mode=""></image>
		</view>
		<view class="p_collect">
			<view class="c_left">
				<image class="c_left_img" v-if="!isCollected" @click="collect" src="../../static/img/shoucang.png" mode=""></image>
				<image class="c_left_img" v-if="isCollected" @click="cancelCollect" src="../../static/img/collected.png" mode=""></image>
				<view class="c_left_text">收藏</view>
			</view>
			<view class="p_time">浏览 {{form.glanceCount}} 次</view>
			<view class="p_time">{{form.addTime}}</view>
		</view>
		<view class="q_footer">
			<!-- <view class="q_footer_inner" @tap="toIndex" style="width: 25%;">
				<image class="footer_img" src="../../static/img/tabbar/home.png" mode=""></image>
				<text>首页</text>
			</view> -->
			<!-- <view class="q_footer_inner" @tap="toPublish" style="width: 25%;">
				<image class="footer_img" src="../../static/img/tabbar/info.png" mode=""></image>
				<text>发布</text>
			</view>
			<view class="q_footer_inner" style="width: 25%;" @tap="formSubmit" v-if="form.type == 0">
				<image class="footer_img" src="../../static/img/poster.png" mode=""></image>
				<text>生成海报</text>
			</view> -->
			<view class="q_footer_inner" @tap="copyWechat" style="background: #007AFF;width: 50%;">
				<text style="color: #FFFFFF;">复制微信</text>
			</view>
			<view class="q_footer_inner" @tap="takePhone" style="background: #DD524D;width: 50%;">
				<text style="color: #FFFFFF;">拨打电话</text>
			</view>
		</view>
		<!-- 海报 -->
		<view class="posters" v-if="isPoster">
			<view class="posters_layer">
				<view class="canvas-box">
					<canvas class="canvas-inner" canvas-id="mycanvas"/>
				</view>	
				<view class="poster_btn">
					<view @tap="isPoster = false" class="poster_cancel">取消</view>
					<view @tap="saveImg" class="poster_cancel sure_btn">保存到相册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailId: '',
				imgList: [],
				form: {},
				isPoster: false,
				isCollected: false,
				isLogin: false,
				favId: ''
			}
		},
		onLoad(option) {
			this.detailId = option.id
			this.getDetail()
		},
		// 分享小程序
		onShareAppMessage(res) {
			return {
				title: "招聘信息",
				path: '/pages/jobDetail/jobDetail?id=' + this.detailId
			}
		},
		methods: {
			copyWechat(){
				let that = this
				uni.setClipboardData({
					data: that.form.customerWechat,
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功！'
						})
					},
					fail() {
						uni.showToast({ //提示
							title: '复制失败！'
						})
					}
				});
			},
			//浏览记录
			addView(){
				let that = this;
				let type
				if(that.form.type == 0){ //招聘
					type = 1
				}else if(that.form.type == 1) { //求职
					type = 2
				}
				that.$api.request('/api/history/add','',{
					userId: uni.getStorageSync("userId"),
					targetid: that.detailId,
					type: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
				})
			},
			// 点击预览图片
			clickImg(index){
				let that = this
				wx.previewImage({
					urls: that.imgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: that.imgList[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			//获取收藏列表
			getCollectList(){
				let that = this;
				let type
				if(that.form.type == 0){ //招聘
					type = 1
				}else if(that.form.type == 1) { //求职
					type = 2
				}
				that.$api.request('/api/favorate/list','',{
					userId: uni.getStorageSync("userId"),
					type: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.collectList = res.rows;
					that.isCollected = false
					that.collectList.forEach(item=>{
					    if(item.targetId == that.detailId){
					        that.isCollected = true
							that.favId = item.favId
					    }
					})
				})
			},
			collect(){
				let that = this;
				if(!that.isLogin){
					uni.getUserProfile({
						desc:'Wexin',     // 这个参数是必须的
						success:res=>{
						   console.log("userRes",res)
						   uni.setStorageSync('nickName', res.userInfo.nickName);
						   uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl);
						   uni.login({
								provider: 'weixin',
								success: (wxres => {
									console.log("wxres",wxres)
									that.$api.request('/api/web/wxlogin','',{
										code: wxres.code,
									}, failres => {
										uni.showToast({
											title: failres.msg,
											icon: "none"
										});
									}).then(res1 => {
										uni.setStorageSync('token', res1.data.token);
										uni.setStorageSync('openid', res1.data.openid);
										uni.setStorageSync('userId', res1.data.user.userId);
										that.isLogin = true
										that.getDetail()
									})
								})
							})
					   },
					   fail:err=>{
						   uni.showToast({
						   	title: "请先登录，才能进行收藏操作！",
						   	icon: "none"
						   });
					   }
					})
				}else{
					let type
					if(that.form.type == 0){ //招聘
						type = 1
					}else if(that.form.type == 1) { //求职
						type = 2
					}
					that.$api.request('/api/favorate/add','',{
						userId: uni.getStorageSync("userId"),
						targetId: that.form.id,
						createIp: '1',
						type: type,
					}, failres => {
						uni.showToast({
							title: failres.msg,
							icon: "none"
						});
					}).then(res => {
						that.getDetail()
					})
				}
			},
			// 取消收藏
			cancelCollect(){
				let that = this;
				let type
				if(that.form.type == 0){ //招聘
					type = 1
				}else if(that.form.type == 1) { //求职
					type = 2
				}
				that.$api.request('/api/favorate/remove','',{
					ids: that.favId,
					type: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.getDetail()
				})
			},
			//获取详情
			getDetail(){
				let that = this;
				that.$api.request('/api/recruitmentjob/detail','',{
					id: that.detailId
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					if(res.data){
						that.form = res.data
						if(uni.getStorageSync("token")){
							that.isLogin = true
							that.getCollectList()
						}
						this.addView()
						if(that.form.img){
							that.imgList = that.form.img.split(",")
						}else{
							that.imgList = []
						}
					}else{
						uni.showModal({
						    title: '提示',
						    content: res.msg,
						    success: function (res) {
						        if (res.confirm) {
									uni.navigateBack()
						        } else if (res.cancel) {
									uni.navigateBack()
						        }
						    }
						});
					}
				})
			},
			formSubmit: function(e){
				console.log(e)
				var that = this;
				that.isPoster = true
				uni.showLoading({
				    title: '海报生成中...'
				});
				var context = wx.createCanvasContext('mycanvas');
				var path = '../../static/img/poster_bg.jpg'
				context.drawImage(path,0,0,350,550);
				context.font = "36px bold FangSong";
				context.fillStyle = "#FFFFFF";
				context.textAlign = "center";
				context.textBaseline = "middle";
				let salary = that.form.salary || "面谈"
				context.fillText("岗位:"+ that.form.post, 180, 230);
				context.fillText("薪资:"+ that.form.salary, 180, 300);
				let submitId = that.detailId || "00000000"
				uni.request({
					url: "https://zlzfcloud.xyz/api/weixinCode/getCode",
					method: 'POST',
					responseType: 'arraybuffer',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
				    },
					data: {
						param: submitId,
						page: 'pages/jobDetail/jobDetail'
					},
					success: (res) => {
						console.log(res)
						let src = wx.arrayBufferToBase64(res.data);
						let src2 = 'data:image/png;base64,' + src
						const fs = wx.getFileSystemManager();
						//随机定义路径名称
						var times = new Date().getTime();
						var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
						console.log("codeimg",codeimg)
						fs.writeFile({
							filePath: codeimg,
							data: src2.slice(22),
							encoding: 'base64',
							success: (rrr) => {
							  console.log("rrr",rrr)
							  context.drawImage(codeimg,130,330,100,100);
							  context.draw();
							  uni.hideLoading()
							},
							fail: (err) =>{
								console.log("err",err)
							}
						});
					},
				})
			},
			saveImg(){
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					height: 450,
					width: 350,
					canvasId: 'mycanvas',
					success: (response) => {
						uni.saveImageToPhotosAlbum({
							filePath: response.tempFilePath,
							success: (response) => {
							 console.log(response);
							 uni.showModal({
							 	title: '提示',
							 	content: '图片保存成功！',
							 	showCancel: false
							 })
							 this.isPoster = false
							},
							fail: (response) => {
							 uni.openSetting({
								success: (response) => {
								}
							 })
							}
						})
					},
					fail: (response) => {
						console.log(response);
					}
				}, this); 
			},
			toIndex(){
				uni.navigateTo({
					url: '../jobHunting/jobHunting'
				})
			},
			toPublish(){
				uni.switchTab({
					url: '../publishType/publishType'
				})
			},
			takePhone(){
				let that = this
				uni.makePhoneCall({
				    phoneNumber: that.form.mobile
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 200rpx;
		.p_time{
			color: #888888;
			font-size: 30rpx;
		}
		.p_collect{
			width: 94%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 25rpx;
			.c_left{
				display: flex;
				align-items: center;
				.c_left_img{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
				.c_left_text{
					color: #888888;
					font-size: 30rpx;
				}
			}
		}
		.p_content{
			width: 94%;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			font-size: 32rpx;
			line-height: 50rpx;
			color: #222222;
		}
		.q_link{
			color: #19BE6B;
			width: 94%;
			margin: 0 auto;
			margin-bottom: 10rpx;
		}
		.publisher{
			width: 96%;
			margin: 0 auto;
			border-bottom: 1rpx solid #efefef;
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			.publisher_img{
				width: 60rpx;
				height: 60rpx;
			}
			.publisher_inner{
				margin-left: 30rpx;
				.title{
					margin-bottom: 15rpx;
				}
				.publisher_tag{
					display: flex;
					align-items: center;
					.p_zhao{
						color: #FFFFFF;
						font-size: 28rpx;
						background: #E54D42;
						padding: 5rpx 10rpx;
						border-radius: 5rpx;
						margin-right: 20rpx;
					}
					.qiuzhi{
						background: #3388FF;
					}
					.p_top{
						color: #E54D42;
						font-size: 28rpx;
						background: #F0D492;
						padding: 5rpx 10rpx;
						border-radius: 5rpx;
						margin-right: 20rpx;
					}
					
				}
			}
		}
		.p_img{
			width: 90%;
			margin: 0 auto;
			.p_img_inner{
				width: 100%;
				height: 400rpx;
				margin-bottom: 15rpx;
			}
			
		}
		.q_tag{
			width: 94%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 10rpx 0;
			margin-bottom: 30rpx;
			margin-top: 20rpx;
			margin-left: 25rpx;
			.q_tag_inner{
				color: #3388FF;
				border: 1rpx solid #3388FF;
				font-size: 28rpx;
				margin-right: 20rpx;
				padding: 5rpx 10rpx;
				border-radius: 5rpx;
			}
		}
		.q_footer{
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #FFFFFF;
			border-top: 1rpx solid #C0C0C0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.q_footer_inner{
				text-align: center;
				padding: 40rpx 0;
				.footer_img{
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin: 0 auto;
				}
				text{
					font-size: 28rpx;
					color: #666666;
					margin-top: 15rpx;
				}
			}
		}
		.posters{
			width: 100vw;
			height: 100%;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 999999;
			.posters_layer{
				background: rgba(0,0,0,0.7);
				width: 100%;
				height: 100%;
				padding-top: 20rpx;
				border-radius: 10rpx;
				.canvas-box{
					width:350px;
					height:530px;
					margin: 0 auto;
					.canvas-inner{
						width:100%;
						height:100%;
						z-index: 9999;
						background: #FFFFFF;
						border-radius: 10rpx;
					}
				}
				.poster_btn{
					width: 350px;
					height: 100rpx;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					.poster_cancel{
						width: 270rpx;
						height: 88rpx;
						// border: 1rpx solid #FFFFFF;
						background: #FFFFFF;
						color: #0EBFDF;
						text-align: center;
						line-height: 88rpx;
						border-radius: 40rpx;
					}
					.sure_btn{
						background: #0EBFDF;
						border: none;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
